<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="200px" :rules="rules">
      <el-form-item prop="wx_appid" label="微信公众号AppID（应用id）"label-width="230px" >
        <el-input v-model.trim="form.wx_appid"  maxlength="18"  style="max-width:500px;"/>
      </el-form-item>
      <el-form-item prop="wx_appsecret" label="微信公众号AppSecret（密钥）"  label-width="230px" >
        <el-input type="password" show-password v-model.trim="form.wx_appsecret" maxlength="32" style="max-width:500px;" />
      </el-form-item>
      <el-form-item prop="mp_verify" label="微信公众号校验文件" label-width="230px">
        <el-upload
          class="upload-demo"
          :action="upload_url2"
          :headers = "tokenFig"
          :on-success="handleAvatarSuccess1"
          :limit="1"
          accept =".txt"
          >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传txt文件，且不超过10k</div>
        </el-upload>
      </el-form-item>
      <el-form-item prop="mch_id" label="商户平台AppID（应用id）">
        <el-input v-model.trim="form.mch_id" maxlength="10" style="max-width:500px;"/>
      </el-form-item>
      <el-form-item prop="apiv2" label="商户平台APIv3（密钥）" >
        <el-input type="password" show-password v-model.trim="form.apiv2" maxlength="32"  style="max-width:500px;"/>
      </el-form-item>
      <el-form-item prop="apiv2" label="商户平台证书序列号" >
        <el-input v-model.trim="form.serial_no" maxlength="40"  style="max-width:500px;"/>
      </el-form-item>
      <el-form-item prop="apiclient_key" label="apiclient_key.pem（证书私钥）" label-width="230px">
        <el-upload
          class="upload-demo"
          :action="upload_url"
          :headers = "tokenFig"
          :data = "{type:'apiclient_key',file_format:'pem'}"
          :on-success="handleAvatarSuccess2"
          :limit="1"
          accept =".pem"
          >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传pem文件，且不超过10k</div>
        </el-upload>
      </el-form-item>
      <el-form-item prop="apiclient_cert" label="apiclient_cert.pem（证书公钥）" label-width="230px">
        <el-upload
          class="upload-demo"
          :action="upload_url"
          :headers = "tokenFig"
          :data = "{type:'apiclient_cert',file_format:'pem'}"
          :on-success="handleAvatarSuccess3"
          :limit="1"
          accept =".pem"
          >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传pem文件，且不超过10k</div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {getToken} from "@/utils/auth";
import {mapGetters} from "vuex";
import {addOrUpdateConfig, getConfig,getAdmin} from "@/api/config";
export default {
  data() {
    return {
      upload_url:process.env.VUE_APP_BASE_API+'/api/config/file_upload',
      upload_url2:process.env.VUE_APP_BASE_API+'/api/config/upload_mp',
      form: {
        wx_appid: undefined,
        wx_appsecret: undefined,
        mp_verify: undefined,
        mch_id: undefined,
        apiv2: undefined,
        serial_no:undefined,
        apiclient_key: undefined,
        apiclient_cert: undefined
      },
      rules:{
        wx_appid:[{ required: true, message: '微信公众号AppID（应用id）不能为空', trigger: 'blur' }],
        wx_appsecret:[{ required: true, message: '微信公众号AppSecret（密钥）不能为空', trigger: 'blur' }],
        mp_verify:[{ required: true, message: '微信公众号校验文件不能为空', trigger: 'blur' }],
        mch_id: [{ required: true, message: '商户平台AppID（应用id）不能为空', trigger: 'blur' }],
        apiv2: [{ required: true, message: '商户平台APIv3（密钥）不能为空', trigger: 'blur' }],
        apiclient_key: [{ required: true, message: 'apiclient_key.pem（证书私钥）不能为空', trigger: 'blur' }],
        apiclient_cert:[{ required: true, message: 'apiclient_cert.pem（证书公钥）不能为空', trigger: 'blur' }],
      }
    }
  },
  computed:{
    tokenFig(){
      return {token:getToken()}
    },
  },
  created() {
    this.getConfigData()
  },
  methods: {
    getConfigData(){
      getConfig().then((res)=>{

          if(res.status==200){
            this.form = res.data
          }

      })
    },
    //上传成功后，返回
    handleAvatarSuccess1(res, file) {
      if(file.response.status==200){
        this.form.mp_verify = file.response.path
        this.$message({
          message: file.response.msg,
          type: 'success'
        });
      }else {
        this.$message({
          message: file.response.msg,
          type: 'error'
        });
      }
    },
    //上传成功后，返回
    handleAvatarSuccess2(res, file) {
      if(file.response.status==200){
        this.form.apiclient_key = file.response.path
        this.$message({
          message: file.response.msg,
          type: 'success'
        });
      }else {
        this.$message({
          message: file.response.msg,
          type: 'error'
        });
      }
    },
    //上传成功后，返回
    handleAvatarSuccess3(res, file) {
      if(file.response.status==200){
        this.form.apiclient_cert = file.response.path
        this.$message({
          message: file.response.msg,
          type: 'success'
        });
      }else {
        this.$message({
          message: file.response.msg,
          type: 'error'
        });
      }
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          addOrUpdateConfig(this.form).then(res=>{
            if(res.status==200){
              this.$message({
                message: res.msg,
                type: 'success'
              });
            }else{
              this.$message({
                message:  res.msg,
                type: 'error'
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

